<template>
	<view>
		<view class="tupian">
			<image :src="shangmian" class="img" mode="widthFix" style="vertical-align: bottom;"></image>
			<image :src="zhongjian" class="img" mode="widthFix"></image>
			<image :src="zhongjian" class="img" mode="widthFix"></image>
			<view class="neibu_ke">
				<view class="biao_title">附近春节特惠课程</view>
				<scroll-view style="height: 660rpx;width: 694rpx;box-sizing: border-box;" scroll-y="true" >
					<view v-for="(itme,index) in chuanjie_shuju" :key="index" @tap="gokechengxiang(itme)">
						<view style="display: flex;" class="box_wai">
							<view class="img">
								<image :src="itme.face_url" class="img"></image>
								<view class="categories_child">{{itme.map.masterMechanismEntity.categories_child}}</view>
								<view class="vertical" v-if="itme.is_attend_activities">
									<image :src="quan_" mode="widthFix" style="width: 170rpx;vertical-align: bottom;"></image>
								</view>
							</view>
							<view style="margin-left: 20rpx;">
								<view style="font-size: 32rpx;font-weight: bold;">{{itme.itt}}</view>
								<view style="display: flex;justify-content: space-between;align-items: center;height: 37rpx;margin:20rpx 0;">
									<view style="display: flex;align-items: center;position: relative;">
										<view style="color: #FF3D3D;font-weight:bold ;">
											<text style="font-size:20rpx;">￥</text>
											<text style="font-size:33rpx;margin: 0 5rpx;">{{itme.original_price}}</text>
											<text style="font-size:20rpx;">/ 节</text>
										</view>
										<!-- <view style="font-weight:bold ;height: 37rpx;" v-if="itme.map.priceList.length != 0" :class="itme.map.activityEntity != null ? 'panduan' :'zhengchang'">
											<text style="font-size:20rpx;">￥</text>
											<text style="margin: 0 5rpx;">{{itme.map.priceList[0].price}}</text>
											<text style="font-size:20rpx;">/ 节</text>
										</view> -->
									</view>
								</view>
								<view style="display: flex;justify-content: space-between;width: 400rpx;align-items: center;">
									<view style="display: flex;">
										<view v-if="itme.danjie_shifou != ''">
											<image :src="danjie_img" class="img_huo"></image>
										</view>
										<view style="margin-left: 10rpx;" v-if="itme.pingtuan_shifou != ''">
											<image :src="pingtuan_img" class="img_huo"></image>
										</view>
										<view v-if="itme.xianshi_shifou != ''" style="margin-left: 10rpx;">
											<image :src="xianshi_img" class="img_huo"></image>
										</view>
									</view>
									<view style="font-size: 25rpx;color: #AEAEAE;">已售{{itme.pay_num}}</view>
								</view>
							</view>
						</view>
						<view style="height: 2rpx;width: 630rpx;background: #F5F5F5;margin: 30rpx 0;"></view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				shangmian: "http://img.curiousmore.com/336937233360",
				zhongjian: "http://img.curiousmore.com/50374315407",
				erweima: "http://img.curiousmore.com/223562739569",
				jingdu: "",
				weidu: "",
				chuanjie_shuju: [],
				danjie_img: "http://img.curiousmore.com/450973",
				pingtuan_img: "http://img.curiousmore.com/172161",
				xianshi_img: "http://img.curiousmore.com/307599"
			}
		},
		methods: {
			async	chunjie(){
					const res = await this.$myRequest({
						url: "/masterSetPrice/queryActivityListPageByType",
						data: {
							pageSize: 10,
							currentPage: 1,
							latitude: this.weidu,
							longitude: this.jingdu,
							status: 2,
							type: "grouping"
						}
					})
					res.data.forEach((itme) => {
						itme.itt = "【" + itme.course_num + "节】" + itme.title
						itme.danjie_shifou = ""
						itme.xianshi_shifou = ""
						itme.pingtuan_shifou = ""
						if(itme.map.activityEntityList != null && itme.map.activityEntityList.length != 0){
							itme.map.activityEntityList.forEach((itmes) => {
								if(itmes.type == "single_payment"){
									itme.danjie_shifou = true
								}else if(itmes.type == "salesCourse"){
									itme.xianshi_shifou = true
								}else if(itmes.type == "grouping"){
									itme.pingtuan_shifou = true
								}
							})
						}
					})
					this.chuanjie_shuju = res.data
				},
				gokechengxiang(itme){
					uni.navigateTo({
					    url: '/pages/World/classChannel/classChannel?curriculumId=' + itme.id
					})
				}
		},
		onLoad() {
			try{
				const res = uni.getStorageSync('storage_key');
				this.jingdu = res.longitude
				this.weidu = res.latitude
				this.chunjie()
			}catch(e){}
		}
	}
</script>
<style lang="scss" scoped>
	.tupian{
		position: relative;
		.neibu_ke{
				position: absolute;
				width: 694rpx;
				left: 27rpx;
				height: 761rpx;
				box-sizing: border-box;
				padding: 27rpx;
				background: #FFFBED;
				top: 1400rpx;
				border-radius: 30rpx;
				.biao_title{
					font-size: 32rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
			}
		
		.img{
			width: 750rpx;
			vertical-align: top;
		}
		.zhongjian_kuang{
			position: absolute;
			left: 33rpx;
			top: 475rpx;
			width: 685rpx;
			height: 587rpx;
			box-sizing: border-box;
			border: 10rpx solid #000000;
			border-radius: 25rpx;
			background: #FFFBED;
			padding: 35rpx;
			font-size: 30rpx;
			letter-spacing: 2rpx;
			.erwei{
				position: absolute;
				width: 170rpx;
				height: 170rpx;
				top: 310rpx;
				left: 231rpx;
			}
		}
	}
	.box_wai{
		display: flex;
		.img_huo{
			height: 40rpx;
			width: 130rpx;
		}
		.img{
			width: 170rpx;
			height: 170rpx;
			border-radius: 20rpx;
			position: relative;
			.categories_child{
				min-width: 50rpx;
				height: 38rpx;
				line-height: 38rpx;
				padding: 0 10rpx;
				font-size: 20rpx;
				background: #FF3D3D;
				text-align: center;
				border-radius: 20rpx 0 20rpx 0;
				position: absolute;
				top: 0;
				left: 0;
				color: #FFFFFF;
			}
			.vertical{
				position: absolute;
				left: 0;
				bottom: 0;
			}
		}
	}
</style>